<!-- 章管理页面 -->
<template>
  <a-col
    :span="12"
    class="seal"
    :class="this.propsData.type == 1 ? 'seal_br' : ''"
  >
    <p class="page-title font14 ">
      <span> {{ propsData.pageTitle }}</span>
    </p>

    <p class="tc tips">
      <span class="warning " v-if="this.pageData.auditState == 0">
        已上传<strong>{{ filterSealName(this.propsData.type) }}</strong>
        ，请耐心等待审核。审核期间， 暂不能使用<strong>{{
          filterSealName(this.propsData.type)
        }}</strong
        >，特此通知 !
      </span>
    </p>

    <p class="tc tips">
      <span class="danger " v-if="this.pageData.auditState == 2">
        您上传的
        <strong>{{ filterSealName(this.propsData.type) }}</strong
        >，审核不通过，原因如下：
        <br />
        {{ this.pageData.remark }}
      </span>
    </p>
    <div class="seal_left">
      <div class="content">
        <div class="content_img">
          <div
            v-viewer="{ movable: true, title: true }"
            v-if="contractSealImg != ''"
          >
            <img :src="contractSealImg" alt="" />
          </div>
          <div class="noImg font14" v-else>暂无图片</div>
          <c-upload
            type="button"
            @change="uploadImg"
            accept="image/png"
            buttonName="立即上传"
            buttonType="primary"
            :disabled="this.pageData.auditState == 0 ? true : false"
          ></c-upload>
        </div>
        <div class="content-size font14 flex">
          <p class="title">{{ propsData.sealTypeLable }}：</p>
          <p>
            <a-select
              @change="sizeSelect"
              v-model="sealSize"
              class="seal-select"
              :disabled="this.pageData.auditState == 0 ? true : false"
            >
              <a-select-option
                v-for="item in sealTypeArr"
                :value="item.value"
                :key="item.value"
              >
                {{ item.lable }}
              </a-select-option>
            </a-select>
          </p>
          <p>
            <a-button
              @click="onSave"
              :disabled="this.pageData.auditState == 0 ? true : false"
              >保存</a-button
            >
          </p>
        </div>
        <div class="require flex">
          <p class="title">上传要求：</p>
          <div>
            <p
              v-for="(item, index) in this.propsData.sizeTypeText"
              :key="index"
            >
              {{ item }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </a-col>
</template>

<script>
import {
  modifyLegalPersonSealSize,
  modifyContractSealSize,
  modifyBusinessSealSize,
  uploadLegalPersonSeal,
  uploadContractSeal,
  uploadBusinessSeal,
  getLegalPersonSeal,
  getContractSeal,
  getBusinessSeal
} from "@/api/contract";
import cUpload from "@/components/upload";

export default {
  props: {
    //章类型
    sealTypeArr: {
      type: Array,
      default: () => {
        return [];
      }
    },
    propsData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    cUpload
  },
  data() {
    return {
      sealFile: "",
      sealSize: null,
      contractSealImg: "",
      pageData: {}
    };
  },
  created() {
    this.initPage();
    this.sealSize = this.sealTypeArr[0].value;
  },
  methods: {
    filterSealName(type) {
      let text = "";
      type == 1
        ? (text = "合同章 ")
        : type == 3
        ? (text = "法人章 ")
        : (text = " 业务章 ");
      return text;
    },
    sizeSelect(val) {
      this.sealSize = val;
    },
    //上传图片
    uploadImg(file) {
      let that = this;
      let reader = new FileReader();
      reader.onload = function(theFile) {
        let image = new Image();
        image.onload = function() {
          if (
            this.width != that.propsData.sealSizeWH &&
            this.height != that.propsData.sealSizeWH
          ) {
            let errorMsg = `图片尺寸限制为${that.propsData.sealSizeWH} X ${that.propsData.sealSizeWH} `;
            that.$message.error(errorMsg);
          } else {
            that.contractSealImg = URL.createObjectURL(file);
            that.sealFile = file;
            that.saveImgSize();
          }
        };
        image.src = theFile.target.result;
      };
      reader.readAsDataURL(file);
    },

    //修改尺寸
    onSave() {
      let requesUrlFunList = [
        modifyContractSealSize,
        modifyBusinessSealSize,
        modifyLegalPersonSealSize
      ];
      let requesFun = requesUrlFunList[this.propsData.type - 1];
      requesFun({
        id: this.pageData.id,
        size: this.sealSize
      })
        .then(() => {
          this.$message.success("修改成功");
          this.initPage();
        })
        .finally(() => {});
    },

    //保存图片及尺寸
    saveImgSize() {
      let requesUrlFunList = [
        uploadContractSeal,
        uploadBusinessSeal,
        uploadLegalPersonSeal
      ];
      let requesFun = requesUrlFunList[this.propsData.type - 1];
      const formData = new FormData();
      formData.append("size", this.sealSize);
      formData.append("file", this.sealFile);
      requesFun(formData)
        .then(() => {
          this.$message.success("上传成功");
          this.initPage();
        })
        .finally(() => {});
    },
    //获取页面数据
    initPage() {
      let requesUrlFunList = [
        getContractSeal,
        getBusinessSeal,
        getLegalPersonSeal
      ];
      let requesFun = requesUrlFunList[this.propsData.type - 1];
      requesFun({})
        .then(res => {
          this.pageData = res;
          this.contractSealImg = res.ossFileLink
            ? res.ossFileLink
            : this.contractSealImg;
          this.sealSize = res.size ? res.size : this.sealSize;
        })
        .finally(() => {});
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
@mixin base_w_h() {
  width: 100px;
  height: 100px;
}
strong {
  font-weight: 500;
  color: red;
}
.seal_br {
  border-right: 1px solid #f1f1f1;
}
.seal {
  .seal-select {
    width: 150px;
    padding-right: 10px;
  }
  .tips {
    min-height: 10px;
  }
  .page-title {
    color: #666;
    margin-left: 20px;
  }
  .seal_left {
    display: flex;
    padding-left: 30px;

    .require,
    .content-size {
      color: #222;
      .text {
        margin-bottom: 10px;
        display: inline-block;
      }
      .title {
        width: 100px;
        text-align: right;
        line-height: 32px;
      }
    }
    .content {
      margin: auto;
      margin-bottom: 60px;

      .content_img {
        padding-bottom: 40px;
        width: 100px;
        margin-left: 120px;
        text-align: center;
        img {
          display: block;
          @include base_w_h();
          margin-bottom: 20px;
        }
        .noImg {
          @include base_w_h();
          margin-bottom: 20px;
          line-height: 100px;
          text-align: center;
          color: #999;
        }
        .a-button {
          width: 100px;
        }
      }
    }
  }
}
</style>
